<template>
  <div class="container">
    <div style="width: 200px">
      <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
      >
        <a-menu-item key="1" @click="$router.push('/holiday/test')">
          <a-icon type="pie-chart" />
          <span>页面 1</span>
        </a-menu-item>
        <a-menu-item key="2" @click="$router.push('/holiday/setkaoqinzu')">
          <a-icon type="desktop" />
          <span>页面 2</span>
        </a-menu-item>
        <a-menu-item key="3" @click="$router.push('/holiday/test2')">
          <a-icon type="inbox" />
          <span>页面 3</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title"
            ><a-icon type="mail" /><span>Navigation One</span></span
          >
          <a-menu-item key="5" @click="$router.push('/holiday/gaodeMap')">
            gaodeMap
          </a-menu-item>
          <a-menu-item key="6" @click="$router.push('/holiday/list')">
            holidayList
          </a-menu-item>
          <a-menu-item key="7" @click="$router.push('/holiday/newHoliday')">
            newHoliday
          </a-menu-item>
          <a-menu-item key="8"> Option 8 </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"
            ><a-icon type="appstore" /><span>Navigation Two</span></span
          >
          <a-menu-item key="9"> Option 9 </a-menu-item>
          <a-menu-item key="10"> Option 10 </a-menu-item>
          <a-sub-menu key="sub3" title="Submenu">
            <a-menu-item key="11"> Option 11 </a-menu-item>
            <a-menu-item key="12"> Option 12 </a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="mainContent">
      <a-card :bordered="false">
        <router-view></router-view>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      collapsed: false,
    }
  },
  methods: {
  },
};
</script>
<style lang="sass" scoped>
.container
  width: 100%
  height: 100%
  display: flex
  .mainContent
    flex: 1
    height: 100%
    padding: 10px
    background: rgba(0, 0, 0, 0.2)
</style>
